<!--  -->
<template>
  <div class="">
    <top-tit :tit="''"></top-tit>
    <div class="login_title">
      <div class="container">登录/注册</div>
    </div>

    <div class="login_inp">
      <div class="container">
        <div class="user_num">
          手机号<input
            type="text"
            placeholder="请输入手机号码"
            v-model="mobile"
            
          />
        </div>
        <div class="user_password" v-show="!show">
          <!-- <div class="user_password" > -->
          密码<input type="password" placeholder="请输入密码" v-model="password" />
        </div>
      </div>
    </div>

    <div class="login_btn" @click="getCode()" v-show="show">
      <div class="container">获取短信验证码</div>
    </div>
    <div class="login_btn" @click="login()" v-show="!show">
      <div class="container">登录</div>
    </div>

    <div class="changeLoginType">
      <span v-text="show ? '使用密码登录' : '使用短信验证码登录'" @click="changeLoginType"></span>
    </div>

    <div class="protocol">
      <div class="container">
        <input type="checkbox" name="" id="" ref='$ischecked' @click="test()"/>
        <div>
          勾选同意
          <span>《用户协议》</span>
          和
          <span>《隐私协议》</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";

import topTit from "@/components/topTit";
import { Toast } from "vant";
Vue.use(Toast);

export default {
  name: "login",
  //import引入的组件需要注入到对象中才能使用
  components: { topTit },
  data() {
    //这里存放数据
    return {
      show: false,
      mobile: "13800000000",
      password: "",
      proChecked:'',
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    test(){
      // console.log(this.$refs.$ischecked.checked);
      this.proChecked=this.$refs.$ischecked.checked
    },
    login() {
      // console.log(Toast());
      this.$toast("提示内容");
      Toast.loading({
        message: "加载中...",
        forbidClick: true,
      });
      if (!this.show) {
        // console.log(this.mobile);
        // console.log(this.password);
        if (!this.password) {
          Toast.fail("密码不能为空！");
          return;
        }
        if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.mobile)) {
          Toast.fail("手机密码格式不符合要求！");
          return;
        }
        if(!this.proChecked){
          Toast.fail('请勾选协议');
          return ;
        }
        this.$axios
          .post("http://1.14.239.98/api/v2/login/password", {
            mobile: this.mobile,
            password: this.password,
          })
          .then((res) => {
            // console.log(res);
            if (res.code === 0) {
              localStorage.setItem("h5-token", res.data.token);
              this.$router.go(-1);
            }
          })
          .catch(() => {
            Toast.fail("登录失败了！");
          });
      }

    },
    changeLoginType() {
      this.show = !this.show;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // console.log(this.$axios);
    // 1. 通过请求获取首页数据
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
div.login_title {
  height: 1.68rem;
  width: 100%;
  div.container {
    width: 6.3rem;
    height: 1.68rem;
    line-height: 1.68rem;
    font-size: 0.48rem;
    text-align: start;
  }
}
.login_btn {
  padding: 10px 20px;
  height: 0.96rem;
  box-sizing: content-box;
  .container {
    width: 6.3rem;
    height: 0.96rem;
    color: white;
    background-color: rgba(60, 167, 250, 0.6);
    border-radius: 0.08rem;
    line-height: 0.96rem;
    font-size: 0.32rem;
    font-weight: 500;
  }
}

div.login_inp {
  // height: ;
  div.container {
    width: 6.3rem;
    div.user_num,
    div.user_password {
      font-size: 0.32rem;
      color: #333;
      border-bottom: 1px solid #f6f6f6;
      text-align: start;
      display: flex;
      justify-content: space-between;
      line-height: 0.72rem;
      margin-bottom: 0.5rem;
      input {
        height: 0.72rem;
        width: 5rem;
        border: none;
      }
    }
  }
}

div.changeLoginType {
  height: 1.2rem;
  span {
    line-height: 1.2rem;
    color: #3ca7fa;
    font-size: 0.28rem;
  }
}

div.protocol {
  height: 1rem;
  div.container {
    height: 1rem;
    width: 6.3rem;
    display: flex;
    justify-content: start;
    align-items: center;
    input[type="checkbox"] {
      width: 0.4rem;
      height: 0.4rem;
    }

    div {
      margin-left: 0.2rem;
      color: rgba(0, 0, 0, 0.4);
      span {
        color: #3ca7fa;
      }
    }
  }
}
</style>
